<!doctype html>
<html lang="zh-CN" style="height:100%">
<head>
<meta charset="utf-8">
<title>canvas-基础模型</title>
<!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<base target="_blank"/>
</head>

<body style="height:100%">
<canvas id="canvas1" style="border:1px solid #ccc">不支持canvas</canvas>

其他绘图模型API:<br/>
实心矩形 fillRect(x,y,width,height)<br/><br/>

二次方贝塞尔曲线生成，单控制点：<br/>
<a href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html">http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html</a><br/>
三次方贝塞尔曲线生成，双控制点：<br/>
<a href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html">http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html</a><br/><br/>

w3c标准查看：<br/>
<a href="https://www.w3.org/TR/2dcontext/">https://www.w3.org/TR/2dcontext/</a><br/><br/>
<script>
var WINDOW_WIDTH,WINDOW_HEIGHT;

window.onload = function(){
	//自适应配置
	WINDOW_WIDTH = document.body.clientWidth;
	WINDOW_HEIGHT = document.body.clientHeight;

	var canvas1 = document.getElementById("canvas1");
	canvas1.width = WINDOW_WIDTH;
	canvas1.height = WINDOW_HEIGHT;

	//2d绘图模式
	var context1 = canvas1.getContext("2d");

	context1.save();	//保存之前状态，与 restore 方法之间的任意状态改变都不会影响后续代码
	context1.beginPath();	//开始一个新的绘制路径
	//直线
	context1.moveTo(100,50);	//移动当前光标
	context1.lineTo(300,50);
	context1.lineTo(200,50);
	context1.lineTo(200,150);
	//其他直线属性...
	context1.lineWidth = 2;
	context1.closePath();	//关闭当前绘制，并自动闭合至起点（可以省略）
	context1.stroke();	//绘制路径
	context1.restore();	//恢复最近一次保存的状态
	/*
	注：
	fill 填充方法与 stroke 绘制方法，在有重合部分时，会按代码的先后顺序覆盖。
	在实际应用中建议先填充、后绘制描边。
	*/

	//圆、圆弧
	//arc
	context1.save();
	context1.beginPath();
	context1.arc(400,100,50,0,1.5*Math.PI);	//圆心x轴，y轴，半径，开始弧度值（0），结束弧度值（2*Math.PI），绘制方向（false - 顺时针）
	context1.stroke();
	context1.closePath();
	//arcTo
		/*
		1.从起始点向夹角点（x1,y1）与延长线坐标（x2,y2），绘制与2条线相切的圆弧
		2.当圆弧半径较小时，起始点会有延长线至切点
		*/
	context1.beginPath();
	context1.moveTo(100,50);
	context1.arcTo(200,50,200,100,50);	//x1,y1,x2,y2,r
	context1.lineWidth = 3;
	context1.strokeStyle = "#d00";
	context1.stroke();
	context1.restore();
	//圆环
		//绘制原理：非零环绕原则
	context1.save();
	context1.beginPath();
	context1.arc(550,100,20,0,2*Math.PI);
	context1.arc(550,100,50,0,2*Math.PI,true);
	context1.closePath();
	context1.fill();
	context1.restore();

	//贝塞尔曲线
	//二次方贝塞尔
	context1.save();
	context1.moveTo(0,150);	//起始点
	context1.quadraticCurveTo(100,180,100,250);	//控制点，终止点
	context1.stroke();
	context1.restore();
	//三次方贝塞尔
	context1.moveTo(0,250);	//起始点
	context1.bezierCurveTo(100,180,200,350,400,250);	//控制点1，控制点2，终止点
	context1.stroke();
	context1.restore();

	//角度计算
	context1.save();
	context1.beginPath();
	context1.lineTo(100,50);
	context1.lineTo(200,50);
	//x + r * Math.cos(Math.PI*rad/180)
	//出发点（x/y）轴偏移量 + 长度（半径） * Math.cos(Math.PI*角度/180)
	//cos 说明：直角三角形，邻边/斜边，该例为 cos 已知邻边求斜边（sin 同理）
	context1.lineTo(200 + 100 * Math.cos(Math.PI*135/180),50 + 100 * Math.sin(Math.PI*135/180));
	//context1.closePath();
	context1.stroke();
	context1.restore();

	//文本
	context1.save();
	context1.font = "bold 20px Arial";	//字体样式，与 css font 相同，font-size font-family 必填
	//textAlign 水平对齐方式
	//textBaseLine 垂直对齐方式
	context1.fillText("线段与角度",100,30);	//实心文本
	context1.strokeText("圆、圆弧",350,30);	//空心文本
	context1.fillText("贝塞尔曲线",100,200);
	console.log("文本宽度："+context1.measureText("贝塞尔曲线").width);
	context1.restore();

	//自由落体范例
	ballTime = setInterval(function(){
		render(context1);
	},50);
};

//物体参数定义
var ballTime;
var ball = {
	x:600,	//圆心x轴
	y:300,	//圆心y轴
	r:10,	//半径
	g:2,	//加速度
	vx:-10,	//x轴初始速度
	vy:-10,	//y轴初始速度
	init:1	//是否为初始值
};
//绘制流程
function render(ct){
	if(ball.init == 0){
	//1.擦除上一个位置
		ct.clearRect(ball.x - ball.r,ball.y - ball.r ,ball.r * 2,ball.r * 2);	//擦除指定矩形区域
	//2.位移：将 ball 值改为下一个位置值
		ball.x += ball.vx;
		ball.y += ball.vy;
		ball.vy += ball.g;
	}else{
		ball.init = 0;
	}
	/*console.log("y:"+ball.y);
	console.log("vy:"+ball.vy);*/
	//3.碰撞检测
	if(ball.y >= (768 - ball.r)){
		ball.y = 768 - ball.r;
		ball.vy = -parseInt(ball.vy * 0.5);
	}
	if(ball.x <= ball.r){
		ball.x = ball.r;
	}
	if(ball.x <= ball.r && ball.y >= (768 - ball.r)){
		window.clearInterval(ballTime);
	}
	//4.根据 ball 值绘制新的位置
	ct.beginPath();
	ct.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
	ct.fillStyle = "#000";
	ct.fill();
}

</script>

</body>
</html>